import { getProjectsApi } from '@/api'
import { Popup } from 'antd-mobile'
import React, { useEffect, useState } from 'react'

export default function Projects() {
    const [list, setList] = useState<ExemItem[]>()
    const [showLeft, setShowLeft] = useState(false)

    const getProjects = () => {
        setShowLeft(true)
        // 在发请求之前，先判断缓存里面有没有
        let data = sessionStorage.getItem('project-list')
        let now = Date.now();
        let d = now - parseInt(sessionStorage.getItem('time') as string)
        if (d < 5 * 60 * 1000) {
            if (data) {
                let arr = JSON.parse(data) as ExemItem[]
                setList(arr);
                return;
            }
            getProjectsApi().then(res => {
                if (res.errCode === 0) {
                    setList(res.data)
                    // 把请求回来的数据使用sessionStorage缓存
                    sessionStorage.setItem('project-list', JSON.stringify(res.data))
                    sessionStorage.setItem('time', Date.now().toString())
                }
            })
        } else {
            getProjectsApi().then(res => {
                if (res.errCode === 0) {
                    setList(res.data)
                    // 把请求回来的数据使用sessionStorage缓存
                    sessionStorage.setItem('project-list', JSON.stringify(res.data))
                    sessionStorage.setItem('time', Date.now().toString())
                }
            })
        }

    }
    // 现在有一个现象，我们每次点击切换学科，弹出左侧的学科列表的时候，都会发一次请求
    // 但是该请求回来的数据，在长时间内是不变的 
    // 没有必要每次都发请求，而是可以缓存起来 —— 用什么方式缓存？ - sessionStorage
    // 思路： 1. 请求回来后，存到 sessionStorage , 2. 在请求前，先判断缓存有没有，没有再请求，如果有，使用缓存的
    return (
        <div>
            <button onClick={getProjects}>切换学科</button>
            <Popup
                visible={showLeft}
                onMaskClick={() => {
                    setShowLeft(false)
                }}
                position='left'
                bodyStyle={{ width: '60vw' }}
            >
                <ul>
                    {
                        list?.map(item => <li key={item.id}>{item.title}</li>)
                    }
                </ul>

            </Popup>
        </div>
    )
}
